<template>
  <a-card :bordered="false">
    <div class="table-page-search-wrapper">
      <a-form layout="inline" @keyup.enter.native="searchQuery">
        <div class="form-section">
          <a-row :gutter="24">
            <a-col :md="8" style="padding-left: 40px; padding-right: 12px">
              <a-form-item label="计划编号" :maxLength="50">
                <a-input
                  placeholder="请输入计划编号"
                  v-model="queryParam.inspectionNo"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8">
              <a-form-item label="计划名称" :maxLength="50">
                <a-input
                  placeholder="请输入计划名称"
                  v-model="queryParam.inspectionName"
                ></a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8">
              <a-form-item label="计划状态" :maxLength="50">
                <a-select
                  :showArrow="true"
                  :allowClear="true"
                  v-model="queryParam.planStatus"
                  placeholder="请选择计划状态"
                  show-search
                >
                  <a-select-option
                    v-for="item in this.$sysDictOptions('disFlag')"
                    :key="item.k"
                    :value="item.k"
                  >
                    {{ item.v }}
                  </a-select-option>
                </a-select>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row :gutter="24">
            <a-col :md="8" style="padding-left: 40px; padding-right: 12px">
              <a-form-item label="创建时间" :maxLength="50">
                <a-range-picker
                  v-model="queryParam.createDate"
                  format="YYYY-MM-DD"
                  @change="createTimeChange"
                />
              </a-form-item>
            </a-col>
            <a-col :md="8">
              <span
                style="float: left; overflow: hidden"
                class="table-page-search-submitButtons"
              >
                <a-button
                  type="primary"
                  @click="$refs.table.refresh(true)"
                  icon="search"
                  >查询</a-button
                >
                <a-button
                  @click="
                    () => {
                      this.$objToReset(queryParam), $refs.table.refresh(true)
                    }
                  "
                  icon="reload"
                  style="margin-left: 8px"
                  >重置</a-button
                >
              </span>
            </a-col>
          </a-row>
        </div>
      </a-form>
      <div class="table-operator">
        <a-button
          @click="$refs.modalEdit.add()"
          type="primary"
          icon="plus"
          v-wx-role="140101"
          >添加</a-button
        >
        <a-dropdown v-if="selectedRowKeys.length > 0">
          <a-menu slot="overlay">
            <a-menu-item>
              <a-popconfirm
                title="确定删除吗?"
                @confirm="() => handleDelete()"
                v-wx-role="140104"
              >
                <a><a-icon type="delete" />删除</a>
              </a-popconfirm>
            </a-menu-item>
          </a-menu>
          <a-button style="margin-left: 8px"
            >批量操作<a-icon type="down"
          /></a-button>
        </a-dropdown>
      </div>
      <s-table
        ref="table"
        rowKey="id"
        size="middle"
        :scroll="{ x: 1500 }"
        :columns="columns"
        :alert="options.alert"
        :row-selection="options.rowSelection"
        :data="loadData"
      >
        <template slot="planStatus" slot-scope="text, record">
          <a-switch
            style="line-height: 16px"
            v-model="record.planStatus"
            @change="planStatusChange(record)"
          >
          </a-switch>
        </template>
        <template slot="inspectionName" slot-scope="text, record">
          <a @click="handleEdit(record)">{{
            text == null || text == '' ? '--' : text
          }}</a>
        </template>
        <template slot="action" slot-scope="text, record">
          <a-popconfirm
            title="确定删除吗?"
            @confirm="() => handleDelete(record.id)"
            v-wx-role="140103"
          >
            <a>删除</a>
          </a-popconfirm>
        </template>
      </s-table>

      <dev-inspection-plan-edit
        ref="modalEdit"
        @ok="modalEditOk"
      ></dev-inspection-plan-edit>
      <dev-inspection-plan-view ref="modalView"></dev-inspection-plan-view>
    </div>
  </a-card>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { deleteAction, postAction } from '@/api/manage'
import { mixin } from '@/utils/mixin'
import DevInspectionPlanEdit from './DevInspectionPlanEdit'
import DevInspectionPlanView from './DevInspectionPlanView'
import { getCompanyList } from '@/api/api'
export default {
  name: 'DevInspectionPlanList',
  mixins: [mixin],
  components: {
    STable,
    Ellipsis,
    DevInspectionPlanEdit,
    DevInspectionPlanView,
  },
  data() {
    return {
      visible: false,
      // 查询条件
      queryParam: {
        inspectionNo: undefined,
        inspectionName: undefined,
        planStatus: undefined,
        createDate: undefined,
      },
      // 表头
      // 如果需要字典，那么需要在columns列中加入 customRender: (text) => this.$sysDictFilter(text, 'xxxx')xxxx 为dataIndex
      columns: [
        {
          title: '计划状态',
          dataIndex: 'planStatus',
          scopedSlots: { customRender: 'planStatus' },
        },

        {
          title: '计划编号',
          dataIndex: 'inspectionNo',
        },
        {
          title: '计划名称',
          dataIndex: 'inspectionName',
          scopedSlots: { customRender: 'inspectionName' },
        },
        {
          title: '巡检类型',
          dataIndex: 'inspectionType',
          customRender: (text) => this.$sysDictFilter(text, 'inspectionType'),
        },
        {
          title: '巡检周期',
          dataIndex: 'inspectionCycle',
          customRender: (text) => this.$sysDictFilter(text, 'inspectionCycle'),
        },
        {
          title: '创建时间',
          dataIndex: 'createTime',
        },
        {
          title: '巡检人员',
          dataIndex: 'inspectionPersonnel',
          customRender: (text) => this.getCreateByName(text),
        },
        {
          title: '执行次数',
          dataIndex: 'inspectionCount',
        },
        {
          title: '最后执行时间',
          dataIndex: 'finalExecutionTime',
        },
        {
          title: '下次执行时间',
          dataIndex: 'nextExecutionTime',
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          scopedSlots: { customRender: 'action' },
        },
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        console.log('loadData.parameter', parameter)
        return postAction(
          this.url.list,
          Object.assign(parameter, this.queryParam)
        ).then((res) => {
          return res.result
        })
      },
      selectedRowKeys: [],
      options: {
        alert: {
          clear: () => {
            this.selectedRowKeys = []
          },
        },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange,
          type: 'checkbox',
        },
      },
      url: {
        list: '/system/devInspectionPlan/list',
        delete: '/system/devInspectionPlan/delete',
        saveInfo: '/system/devInspectionPlan/save',
      },
      createByList: [],
    }
  },
  computed: {},
  created() {
    this.getUserList()
  },
  methods: {
    getUserList() {
      // 加载数据方法 必须为 Promise 对象
      var parameter = { pageNo: 1, pageSize: 1000000 }
      getCompanyList(Object.assign(parameter, this.queryParam)).then((res) => {
        this.createByList = res.result.data.records
        console.log('createByList>>', res.result.data.records)
      })
    },
    getCreateByName(text) {
      var obj = this.createByList.filter((aa) => aa.companyId == text)[0]
      if (obj == null) {
        if (text) {
          return '系统管理员'
        }
        return '--'
      }
      return obj.companyName
    },
    createTimeChange(value, dateString) {
      this.queryParam.startCreateDate = dateString[0]
      this.queryParam.endCreateDate = dateString[1]
    },
    // 删除
    handleDelete(record) {
      if (!record) {
        // 如果没有传入，那么批量删除
        record = this.selectedRowKeys.join(',')
      }
      deleteAction(this.url.delete, { ids: record }).then((resp) => {
        this.$message.success('删除成功!')
        this.$refs.table.refresh(true)
      })
    },
    planStatusChange(record) {
      // 修改状态的二次确认
      const text = record.planStatus ? '启用' : '停用'
      postAction(this.url.saveInfo, record).then((res) => {
        this.$message.success(
          '计划【' + record.inspectionName + '】' + text + '成功'
        )
      })
    },
    // 用户编辑
    handleEdit(record) {
      this.$refs.modalEdit.edit(record)
    },
    searchQuery() {
      this.$refs.table.refresh(true)
    },
    // 保存刷新
    modalEditOk() {
      this.$refs.table.refresh()
    },
    // 查看
    handelView(record) {
      this.$refs.modalView.show(record)
    },
    //开启选择
    onSelectChange(selectedRowKeys) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      this.selectedRowKeys = selectedRowKeys
    },
  },
  watch: {},
}
</script>
<style scoped>
.form-section {
  padding: 0% 1% 0% 0%;
  margin-left: -2.5%;
}
</style>
